<template>
  <div>
    <el-table :data="store.state.projectCenter.form.changeProjectsList" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="typeName" :formatter="formatter" label="项目变更类型" />
      <el-table-column prop="beforeContent" label="变更前" />
      <el-table-column prop="afterContentName" label="变更后" />
      <el-table-column prop="description" label="申请变更描述" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <span class="draft" v-if="scope.row.status == 1">草稿</span>
          <span class="pending" v-if="scope.row.status == 2">待审批</span>
          <span class="approved" v-if="scope.row.status == 3">审批通过</span>
          <span class="rejection" v-if="scope.row.status == 4">审批拒绝</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'


export default defineComponent({
  setup() {
    const store = useStore()
    const formatter = (row) => {
      if(row.type==1){
        return '负责人变更'
      }else if(row.type==2){
        return '项目内容变更'
      }else{
        return '承接单位变更'
      }
    }
    return {
      store,
      formatter
    }
  },
})
</script>

<style scoped>
.utils {
  margin: 10px 20px;
}
.demo-form-inline .el-form-item {
  width: 45%;
}
:deep(.el-dialog__body) {
  display: block;
  padding: 10px 20px;
}
</style>
